<template>
    <div>
        反思记录：
        <template>
            <el-input v-model="qo.reflection" placeholder="Please input" clearable />
        </template>
    </div>

    <div>
        <el-button type="success" size="small" @click="addUpdateDialog('add',{})">新增</el-button>
        <el-button type="success" size="small" @click="list">查询</el-button>
    </div>

    <div>
        <el-table :data="tableData" stripe style="width: 100%;height:480px;">
            <template v-for="(item, index) in fields">
                <el-table-column sortable :prop="item.code" 
                :formatter="formatterDate" :label="item.labelName" :width="item.tabColumnWidth" 
                v-if="item.showTabColumn">
                <template v-slot:default="scope">
                    <el-input v-if="item.editType == 'textarea'" v-model="scope.row[item.code]" 
                        type="textarea" 
                        :disabled="item.disabled" :autosize="{ }"/>
                </template>
                </el-table-column>
            </template>
            <el-table-column fixed="left" label="操作" width="60">
                <template v-slot:default="scope">
                    <el-button link type="primary" size="small" @click="addUpdateDialog('updata', scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="demo-pagination-block" style="">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[10, 100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="countNum" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="addAndUpdataDialogVisible" title="" width="90%" destroy-on-close center draggable>
        <el-form :model="form" label-width="70px">
            <template v-for="(item, index) in fields">
                <el-form-item v-if="item.editType == 'date' && item.editShow" :label="item.labelName">
                    <el-date-picker v-model="form[item.code]" type="date" placeholder="选择日期" style="width: 100%"
                        value-format="x" :disabled="item.disabled"/>
                </el-form-item>
                <el-form-item v-if="item.editType == 'number' && item.editShow" :label="item.labelName">
                    <el-input-number v-model="form[item.code]" :precision="2" :step="0.1" :disabled="item.disabled"/>
                </el-form-item>
                <el-form-item v-if="item.editType == 'input' && item.editShow" :label="item.labelName">
                    <el-input v-model="form[item.code]" placeholder="Please input" :disabled="item.disabled"/>
                </el-form-item>
                <el-form-item v-if="item.editType == 'elSwitch' && item.editShow" :label="item.labelName">
                    <el-switch v-model="form[item.code]" :disabled="item.disabled" @change="isTopSwitch"/>
                </el-form-item>
                <el-form-item v-if="item.editType == 'textarea'  && item.editShow" :label="item.labelName">
                    <el-input v-model="form[item.code]" type="textarea" :disabled="item.disabled" 
                    :autosize="{ minRows: 6, maxRows: 40 }"/>
                </el-form-item>
                <el-form-item v-if="item.editType == 'parentValueOpts' && item.editShow" :label="item.labelName">
                    <el-select v-model="form[item.code]" placeholder="请选择" filterable clearable 
                    :disabled="item.disabled">
                        <el-option v-for="item in parentValueOpts" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="item.editType == 'dictionaryTopOpts' && item.editShow" :label="item.labelName">
                    <el-select v-model="form[item.code]" placeholder="请选择" 
                        :disabled="item.disabled" filterable clearable 
                        @change="dictionaryTopChange">
                        <el-option v-for="item in dictionaryTop" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="saveCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { reactive, toRefs, onBeforeMount } from 'vue'
import moment from "moment"

import { $dictionaryList, $listCascade, $dictionaryCount, $dictionaryUpdate, $dictionaryAdd, $dictionaryMap } from '../../api/dictionary.js'
import { introspectionAdd,introspectionDelete,introspectionUpdate,introspectionList } from '../../api/introspection.js'
import { } from '../../components/editComponent.vue'


export default {
    name: 'finance',
    setup() {
        let data = reactive({
            tableData: [],
            countNum: 10,
            pageSize: 100,
            currentPage: 1,
            dictionaryTop: {},
            parentValueOpts:{},
            qo: {},
            fields: [
                { code: 'id', labelName: 'ID', showTabColumn: false, editShow:false,tabColumnWidth:200,editType: 'input',disabled: false},
                { code: 'creationDate', labelName: '创建日期', showTabColumn: true,tabColumnWidth:60, editShow:true,editType: 'date',disabled: false},
                { code: 'updateDate', labelName: '更新日期', showTabColumn: false, tabColumnWidth:60,editShow:false,editType: 'date',disabled: false},
                { code: 'updateUser', labelName: '更新人', showTabColumn: false,tabColumnWidth:200, editShow:false,editType: 'textarea',disabled: false},
                { code: 'creationUser', labelName: '创建人', showTabColumn: false,tabColumnWidth:200, editShow:false,editType: 'textarea',disabled: false},
                { code: 'state', labelName: '数据状态', showTabColumn: false, tabColumnWidth:200,editShow:true,editType: 'input',disabled: false},
                
                { code: 'reflection', labelName: '反思记录', showTabColumn: true, tabColumnWidth:450, editShow:true,editType: 'textarea',disabled: false},
                { code: 'benchmarkingManagement', labelName: '对标管理', showTabColumn: true, tabColumnWidth:450, editShow:true,editType: 'textarea',disabled: false},

            ],
            addAndUpdataDialogVisible: false,
            addAndUpdataType: '',
            form: {},
            accountType: [],
            expenditureType: [],
            dictionaryMaps: {}
        })

        let addUpdateDialog = (type, row) => {
            data.addAndUpdataDialogVisible = true
            data.addAndUpdataType = type
            data.form = row
            if(data.addAndUpdataType === 'updata'){
                dictionaryList({ type: row.type }, 'typeList'); 
            }
            if(data.addAndUpdataType === 'add'){
                showEditField({code:'type',editShow:true,disabled: false})
                showEditField({code:'isTop',editShow:true,disabled: false})
                data.form.reflection = ''
                +'今日反思日记:'
                +'\n\n明天三件事'
                +'\n第一件事：'
                +'\n第二件事：'
                +'\n第三件事：'
                data.form.benchmarkingManagement = 
                '修正假设：多问问自己，我过去遇到过类似的事情吗？我听说过其他犯过类似的错或者做的更好的人吗？有什么相关的方法可以应用到这件事中吗？'
                +'\n三件事：确认明天要办的事情，不超过三件。早中复盘。结合明天必办工作（结果＞过程；能复制的结果＞不能复制的结果；有交付的结果＞不能交付的结果。职场中要反复确认结果；不要给问答题，要给选择题；不要给单选题，要给多选题；尽可能地超过别人的预期一点点，就是这一点点让人永远记得你）'
                +'\n检查:（承诺；习惯性防卫；是否使用了按番茄工作法）'
                +'\n下一步学习计划：看手机过多，结果思维，沟通习惯、习惯改变要想办法改变；先改变习惯'
            }
        }
        let save = async () => {
            if (data.addAndUpdataType === 'add') {
                data.form.expenditureDate = data.form.expenditureDate + (8 * 60 * 60 * 1000);
                let result = await add()
            }
            if (data.addAndUpdataType === 'updata') {
                let result = await updata();
            }
            data.addAndUpdataDialogVisible = false
            list()
        }

        let saveCancel = async () => {
            if (data.addAndUpdataType === 'add') {
                for (let index = 0; index < data.fields.length; index++) {
                    const element = data.fields[index];
                    if (element.code == 'isTop') {
                        element.editShow = false
                        element.disabled = true
                    }
                }
            }
            if (data.addAndUpdataType === 'updata') {
                
            }
            data.addAndUpdataDialogVisible = false
        }

        let add = async () => {
            introspectionAdd(data.form)
            for (let index = 0; index < data.fields.length; index++) {
                const element = data.fields[index];
                if (element.code == 'isTop') {
                    element.editShow = false
                    element.disabled = true
                }
            }
            list()
        }

        let updata = async () => {
            introspectionUpdate(data.form)
            list()
        }

        let list = async () => {
            data.tableData = await introspectionList({
                pageSize: data.pageSize
                , currentPage: data.currentPage
                , types: data.qo.reflection
            })
        }
        list()
        let count = async () => {
            data.countNum = await $dictionaryCount({ pageSize: data.pageSize, currentPage: data.currentPage })
        }
        count()

        const handleSizeChange = (number) => {
            data.pageSize = number
            list()
        }
        const handleCurrentChange = (number) => {
            data.currentPage = number
            list()
        }

        let isTopSwitch = (params) => {
            if (params) {
                showEditField({code:'type',editShow:true,disabled: true})
                showEditField({code:'parentValue',editShow:true,disabled: true})
                showEditField({code:'value',editShow:true,disabled: false})
            }else{
                showEditField({code:'type',editShow:true,disabled: false})
                showEditField({code:'parentValue',editShow:true,disabled: false})
                showEditField({code:'value',editShow:true,disabled: true})
                data.form.value = null
            }
            
        }

        let showEditField = (params)=>{
            for (let index = 0; index < data.fields.length; index++) {
                if (data.fields[index].code == params.code) {
                    if(params.editShow){
                        data.fields[index].editShow = true
                    }else{
                        data.fields[index].editShow = false
                    }
                    if(params.disabled){
                        data.fields[index].disabled = true
                    }else{
                        data.fields[index].disabled = false
                    }                    
                }
            }
        }

        let dictionaryTopChange = async(params)=>{
            dictionaryList({ type: params }, 'parentValueOpts');
        }
            

        let dictionaryList = async (params, type) => {
            if (type == 'parentValueOpts') {
                data.parentValueOpts = await $dictionaryList(params)
            }
            if (type == 'isTop') {
                data.dictionaryTop = await $dictionaryList(params)
            }
            if (type == 'typeList') {
                data.parentValueOpts = await $dictionaryList(params)
            }
            
        }
        dictionaryList({ isTop: true }, 'isTop');


        let dictionaryMap = async () => {
            data.dictionaryMaps = await $dictionaryMap([{ type: "account_type" }])
        }
        dictionaryMap()

        let formatterDate = (row,column)=>{
            if(column.property == 'creationDate'){
                return moment(new Date(row.creationDate)).format('YYYY-MM-DD')
            }
            if(column.property == 'updateDate'){
                return moment(new Date(row.updateDate)).format('YYYY-MM-DD')
            }
            return row[column.property]
        }


        return {
            ...toRefs(data),
            updata,
            list,
            count,
            handleSizeChange,
            handleCurrentChange,
            addUpdateDialog,
            save,
            add,
            dictionaryMap,
            dictionaryList,
            saveCancel,
            showEditField,
            isTopSwitch,
            dictionaryTopChange,
            formatterDate
        }
    }
}
</script>
<style scoped lang='scss'></style>
